<!-- 盒子详情 -->
<template>
  <view class="box-detail-container">
    <view class="float-btn" @click="onRulesTap">
      规则
    </view>
    <!-- 大海报 -->
    <view class="banner-box">
      <image src="../../static/images/delete/d2.png" mode=""></image>
    </view>
    <!-- 款式比例 -->
    <view class="probability">
      <uni-grid :column="4" class="grid" :showBorder="false">
        <template v-for="(item, index) in probabilitys" :key="index">
          <uni-grid-item class="grid-item">
          	<view class="grid-item-box">
          	  <text>{{ item.title }}</text>
          	  <text>概率 {{ item.value }}%</text>
          	</view>
          </uni-grid-item>
        </template>
      </uni-grid>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <GoodsList mode="detail" />
    </view>
    <view class="load-more-container" v-if="useState.status">
      <uni-load-more status="loading"></uni-load-more>
    </view>
  </view>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useGoodsList } from '@/common/use/goods-list.js'
import GoodsList from '@/components/goods-list/goods-list.vue'

export default defineComponent({
  name: "BoxDetail",
  components: {
    GoodsList
  },
  setup() {
    const probabilitys = ref([
      {title: "普通款", value: 93},
      {title: "豪华款", value: 2},
      {title: "稀有款", value: 3},
      {title: "至尊款", value: 2}
    ]);
    
    const onRulesTap = () => {
      uni.navigateTo({
        url: "/pages/rules/rules"
      });
    }
    const { useGoods, useState } = useGoodsList();
    
    return {
      onRulesTap,
      useGoods,
      useState,
      probabilitys
    }
  }
});
</script>

<style scoped lang="scss">
  
page {
  background-color: #EEEEEE;
}
  
.float-btn {
  position: fixed;
  top: 300rpx;
  right: 0;
  width: 40rpx;
  background-color: #87CEEB;
  color: #fff;
  border-top-left-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
  padding: 20rpx 10rpx;
  text-align: center;
  
  navigator {
    height: 100%;
    width: 100%;
  }
}

.banner-box {
  height: 700rpx;
  
  > image {
    width: 100%;
    height: 100%;
  }
}

.probability {
  padding: 30rpx 20rpx;
  background-color: #eee;
  
  .grid-item {
    background-color: #FFF7E7;
    $r: 20rpx;
    &:first-child {
      border-top-left-radius: $r;
      border-bottom-left-radius: $r;
    }
    
    &:last-child {
      border-top-right-radius: $r;
      border-bottom-right-radius: $r;
    }
  }
  
  .grid-item-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    
    text {
      &:last-child {
        color: #7A7977;
      }
    }
  }
}

.goods-list {
  padding: 0 20rpx;
  background-color: #eee;
}
</style>